<template>
  <div>
    <div>
      <van-nav-bar
          title="提现记录"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>
    <!--    在这个-->
    <div v-for="(item,key) in WithdarwMsg" :key="key">
      <!--      盒子里面v-for数据即可-->
      <div class="withdraw">
        <div class="withdrawmonth">
          <span class="month">{{key|formatTimer}}月</span>
          <span class="withdrawmoney1">提现成功 {{item.sum.toFixed(2)}}￥</span>
        </div>
        <div class="withdrawrecord" v-for="(item1,key1) in item" :key="key1" @click="gowithdrawdetail(item1.id)">
          <span class="withdrawicon"><van-icon name="balance-o" color="#a4acb7" size="3rem" /></span>
          <span class="withdrawway">余额提现</span>
          <span class="withdrawdate">{{ item1.overTime|formatTimer1 }}</span>
          <span class="withdrawmoney2">{{item1.money}}￥</span>
          <span class="withdrawstate">{{ item1.status==1?'处理中':(item1.status==2?'提现成功':'提现失败') }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      WithdarwMsg:{},
      sum:null
    }
  },
  mounted() {
    let parse = JSON.parse(localStorage.getItem('login'));
    this.getWithdarwRecord(parse.registerIp)
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: '/withdraw'
      })
    },
    gowithdrawdetail(id){
      this.$router.push({
        path: '/withdrawdetail',
        query:{
          id:id
        }
      })
    },
    getWithdarwRecord(id){
      axios.get('http://localhost:11219/mine/withdraw/getwithdrawrecord/'+id).then(res=>{
        this.WithdarwMsg=res.data.map
        if(this.WithdarwMsg==null){
          this.$toast('暂无提现记录');
        }else{
          for(let key in this.WithdarwMsg){
            for (let i = 0; i < this.WithdarwMsg[key].length; i++) {
              if(this.WithdarwMsg[key][i].status==2){
                this.sum+=Number(this.WithdarwMsg[key][i].money)
              }
            }
            this.WithdarwMsg[key].sum=this.sum
            this.sum=0
          }
        }
      })
    }
  },
  filters: {
    formatTimer: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return MM;
    },
    formatTimer1: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    },
  }
}
</script>

<style scoped>
.withdraw{
  width: 100%;
  height: 100%;
}
.withdraw .withdrawmonth{
  width: 100%;
  height: 55px;
}
.withdrawmonth .month{
  float: left;
  margin: 10px;
}
.withdrawmonth .withdrawmoney1{
  float: left;
  margin-top: 32px;
  margin-left: -44px;
  font-size: 12px;
  color: #a4acb7;
}
.withdraw .withdrawrecord{
  width: 100%;
  height: 70px;
  background-color:white;
}
.withdrawicon{
  float: left;
  margin: 10px 5px;
}
.withdrawrecord .withdrawway{
  float: left;
  margin-top: 10px;
}
.withdrawrecord .withdrawdate{
  float: left;
  margin-top: 40px;
  margin-left: -65px;
  font-size: 12px;
  color: #a4acb7;
}
.withdrawrecord .withdrawmoney2{
  width: 100px;
  text-align: right;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
.withdrawrecord .withdrawstate{
  float: right;
  margin-top: 40px;
  margin-right: -100px;
  font-size: 12px;
  color: #a4acb7;
}

</style>
